/**
 * Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
 * All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are NOT permitted except as agreed by
 * iAuto (Shanghai) Co., Ltd.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 */

import { Form, Input, Row, Col, Space, DatePicker, TableColumnsType } from 'antd';
import IAutoPage from '@/components/soa/IAutoPage';
import IAutoSearch from '@/components/soa/IAutoSearch';
import IAutoTable from '@/components/soa/IAutoTable';
import React from 'react';
import { useAntdTable } from 'ahooks';
import styles from '@/pages/soaManage/scene/official/index.less';
import IAutoButton from '@/components/soa/IAutoButton';
import { getLogList } from '@/services/soa/log';
import { ILogItem } from '@/types/log';
// import IAutoSearchInput from "@/components/soa/IAutoSearchInput";
import { getDateTime, downLoad } from '@/utils/soa/utils';
const { RangePicker } = DatePicker;
const { Item, useForm } = Form;

const columns: TableColumnsType<ILogItem> = [
  {
    title: 'VIN码',
    width: 335,
    dataIndex: 'vin',
  },
  {
    title: '上传时间',
    dataIndex: 'createTime',
    render: text => getDateTime(text),
  },
  {
    title: '文件名',
    dataIndex: 'filePath',
    width: 687,
    render: (text, record) => {
      // return <a onClick={() => window.open(text)}>{text}</a>;
      // return <a onClick={() => downLoad(record.fileUuid, text)}>{text}</a>;
      return (
        <IAutoButton
          buttonType={'form'}
          type={'link'}
          pathname={'/soaManage/log'}
          auth={'log_doDownload'}
          onClick={() => downLoad(record.fileUuid, text)}
        >
          {text}
        </IAutoButton>
      );
    },
  },
];

export default (props: any) => {
  const {
    location: { pathname },
  } = props;
  const [form] = useForm();
  const { tableProps, search } = useAntdTable(getLogList, {
    form,
  });
  const { submit } = search;
  return (
    <div className={styles.main}>
      <IAutoSearch>
        <Row gutter={[8, 8]}>
          <Col span={18}>
            <Form form={form} layout={'inline'}>
              <Item name="vin" style={{ marginBottom: '8px' }}>
                {/*<IAutoSearchInput style={{width:392}} submit={submit} placeholder="请输入VIN码进行筛选" />*/}
                <Input
                  style={{ width: 392 }}
                  placeholder="请输入VIN码进行筛选"
                  allowClear
                  maxLength={20}
                />
              </Item>
              <Item label="选择日期" name="datetime">
                <RangePicker allowClear></RangePicker>
              </Item>
            </Form>
          </Col>
          <Col
            span={6}
            style={{
              paddingBottom: '8px',
              display: 'flex',
              alignItems: 'end',
              justifyContent: 'end',
            }}
          >
            <IAutoButton
              type={'primary'}
              buttonType={'form'}
              pathname={pathname}
              auth={'log_doSearch'}
              onClick={submit}
            >
              查询
            </IAutoButton>
          </Col>
        </Row>
      </IAutoSearch>
      <IAutoPage>
        <IAutoTable columns={columns} tableProps={tableProps} />
      </IAutoPage>
    </div>
  );
};
